<template>
  <div class="order-list-main">
    <!-- 搜索部分 -->
    <el-card shadow="hover" class="order-list-30">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form
        ref="searchForm"
        :model="searchForm"
        class="searchForm"
        label-width="100px"
        size="mini"
      >
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="订单编号">
              <el-input
                v-model="searchForm.orderSn"
                size="mini"
                style="width: 200px"
                placeholder="请填写订单编号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单类型">
              <el-select
                v-model="searchForm.orderType"
                clearable
                placeholder="订单类型"
                class="search-input"
                size="mini"
              >
                <el-option
                  v-for="item in orderTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="支付方式">
              <el-select
                v-model="searchForm.payType"
                clearable
                placeholder="支付方式"
                class="search-input"
                size="mini"
              >
                <el-option
                  v-for="item in payTypeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单状态">
              <el-select
                v-model="searchForm.status"
                clearable
                placeholder="订单状态"
                class="search-input"
                size="mini"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="searchBtn">
        <el-button
          type="default"
          size="mini"
          style="margin: 0 20px"
          @click="deReset"
        >重置</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="doSearch"
        >搜索</el-button>
      </div>
    </el-card>
    <!-- 列表展示部分 -->
    <el-card shadow="hover" class="order-list-30">
      <el-table
        v-loading="loading"
        :data="orderList"
        border
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="#"
          fixed="left"
        />
        <el-table-column
          align="center"
          label="订单编号"
          prop="orderSn"
          width="300px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.orderSn }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="支付方式"
          prop="payType"
          width="200px"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.payType === 0"
              type="info"
              effect="dark"
            >未支付
            </el-tag>
            <el-tag
              v-else-if="scope.rowType === 1"
              effect="dark"
              style="font-size: 25px"
            >
              <svg-icon icon-class="aliPay" class="aliPay" />
            </el-tag>
            <el-tag
              v-else
              style="font-size: 25px"
              type="success"
              effect="dark"
            >
              <svg-icon icon-class="weixin" class="weixin" />
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="订单状态"
          width="200px"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === 0"
              type="danger"
              effect="dark"
            >
              待付款
            </el-tag>
            <el-tag
              v-else-if="scope.row.status == 1"
              type="warning"
              effect="dark"
            >
              待发货
            </el-tag>
            <el-tag v-else-if="scope.row.status === 2">
              已发货
            </el-tag>
            <el-tag v-else-if="scope.row.status === 3">
              已完成
            </el-tag>
            <el-tag
              v-else-if="scope.row.status === 4"
              type="info"
              effect="dark"
            >
              退货
            </el-tag>
            <el-tag v-else type="info">无效订单</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="添加时间"
          prop="createTime"
          width="300px"
        />
        <el-table-column
          align="center"
          label="用户账号"
          prop="memberUsername"
          width="200px"
        />
        <el-table-column
          align="center"
          label="订单类型"
          width="200px"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.orderType === 1"
              type="warning"
            >
              秒杀订单
            </el-tag>
            <el-tag v-else type="success">正常订单</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="备注"
          width="200px"
          prop="note"
        />
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              style="width: 150px"
              @click="goEdit(scope.row)"
            >
              <i
                style="margin-right: 6px"
                class="el-icon-view"
              >查看订单</i>
            </el-button>

          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        style="margin-top:10px;text-align:right;"
        :current-page.sync="pagniationParams.start"
        :page-sizes="pagniationParams.pageSizes"
        :page-size="pagniationParams.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagniationParams.totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { orderList as orderApi } from '@/api/order/orderindex'
import mixin from '@/mixins/index'
export default {
  name: 'Order',
  mixins: [mixin],
  data() {
    return {
      orderTypeList: [
        { name: '正常订单', id: 0 },
        { name: '秒杀订单', id: 1 }
      ], // 秒杀类型列表
      payTypeList: [
        { name: '未支付', id: 0 },
        { name: '支付宝', id: 1 },
        { name: '微信', id: 2 }
      ], // 秒杀类型列表
      statusList: [
        { name: '待付款', id: 0 },
        { name: '待发货', id: 1 },
        { name: '已发货', id: 2 },
        { name: '已完成', id: 3 },
        { name: '退货', id: 4 },
        { name: '无效订单', id: 5 }
      ], // 秒杀类型列表
      searchForm: {
        orderSn: '', // 订单编号
        orderType: '', // 订单类型
        payType: '', // 支付类型
        status: '' // 订单状态
      },
      search: {
        orderSn: '', // 订单编号
        orderType: '', // 订单类型
        payType: '', // 支付类型
        status: '' // 订单状态
      },
      orderList: [] // 订单列表
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    // 获取api中订单列表数据
    getOrderList() {
      this.loading = true
      orderApi(this.pagniationParams.start, this.pagniationParams.limit).then((res) => {
        if (res.success) {
          this.orderList = res.data.rows
          this.pagniationParams.totalNum = res.data.total
        } else {
          this.$message.error('列表请求失败')
        }
        this.loading = false
      }).catch((rej) => {
        this.loading = false
        this.$message.error('列表请求失败')
      })
    },
    // 重置搜索栏
    deReset() {
      this.searchForm = this.$options.data().searchForm
      this.search = this.$options.data().search
    },
    // 点击搜索按钮
    doSearch() {
      this.pagniationParams.start = 1
      /* this.search = Object.assign({}, this.searchForm) */
      this.getOrderList()
    },
    // 编辑
    goEdit(row) {
      // 路由跳转
      this.$router.push({ name: 'orderDetail',
        params: { id: row.id }})
    },
    // 分页规格改变
    handleSizeChange(e) {
      this.pagniationParams.start = 1
      this.pagniationParams.limit = e
      this.getOrderList()
    },
    // 分页点击
    handleCurrentChange(e) {
      this.pagniationParams.start = 1
      this.getOrderList()
    }
  }
}
</script>
<style lang="scss" scoped>
.order-list-main{
  .order-list-30{
    margin: 30px;
  }
}
.searchBtn {
  margin-top: 20px;
  display: flex;
  flex-direction: row-reverse;
}
</style>
